/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div class="mine-content">
    <div class="top">
      <div class="header">个人中心</div>
      <img :src="require('../../../static/img/head.png')" alt="">
      <p>{{userInfo.nickName}}</p>
    </div>
    <ul class="btns">
      <li>
        <div class="left">
          <i class="iconfont icon-wo"></i>
          <span class="label">基本信息</span>
        </div>
        <div class="righ">
          <i class="iconfont icon-previewright"></i>
        </div>
      </li>
      <li>
        <div class="left">
          <i class="iconfont icon-tubiaozhizuomoban_fuzhi"></i>
          <span class="label">修改密码</span>
        </div>
        <div class="righ">
          <i class="iconfont icon-previewright"></i>
        </div>
      </li>
      <li>
        <div class="left">
          <i class="iconfont icon-banben"></i>
          <span class="label">版本信息</span>
        </div>
        <div class="righ">
          <i class="iconfont icon-previewright"></i>
        </div>
      </li>
      <li @click="loginOut">
        <div class="left">
          <i class="iconfont icon-tuichu"></i>
          <span class="label">退出</span>
        </div>
        <div class="righ">
          <i class="iconfont icon-previewright"></i>
        </div>
      </li>
      <li @click="loginOut">
        <div class="left">
          <i class="iconfont icon-prohibit"></i>
          <span class="label">注销</span>
        </div>
        <div class="righ">
          <i class="iconfont icon-previewright"></i>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar/NavBar";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods:{
    loginOut(){
      localStorage.removeItem("loginInfo");
      this.$router.replace('/login');
    }
  },
  mounted(){
    const loginInfo = JSON.parse(localStorage.getItem("loginInfo"));
    this.userInfo = loginInfo || {};
  },  
  components: {
    NavBar
  },

};
</script>

<style lang='less' scoped>
@import "../../util/themt.less";
.mine-content {
  width: 100%;
  height: 100%;
  background: #fff;
  .top {
    width: 100vw;
    height: 55vw;
    background: url("../../../static/img/mine-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    margin-bottom: 10px;
    .header {
      height: 46px;
      width: 100%;
      font-size: 16px;
      text-align: center;
      line-height: 20px;
      color: #fff;
      font-weight: bold;
      line-height: 46px;
    }
    img {
      margin: 8vw auto 2vw;
      height: 18vw;
      width: 18vw;
      border-radius: 20vw;
      display: inline-block;
      border: 1px solid @primary;
    }
    p {
      font-size: 16px;
      color: #fff;
    }
  }
}
.btns {
  li {
    padding: 10px 0;
    margin: 0 16px 10px;
    border-bottom: 1px solid @border-base;
    display: flex;
    .left {
      display: flex;
      align-items: center;
      flex: 1;
      i {
        font-size: 22px;
        color: @primary;
        vertical-align: bottom;
        display: inline-block;
        margin-right: 10px;
      }
      .label {
        font-size: 16px;
        font-weight: bold;
        color: @font-regular;
      }
    }
    .righ {
      // float: right;
      flex: 1;
      text-align: right;
      color: @border-base;
    }
  }
}
</style>
